<template>
    <div id="app">
        <div class="top">
            <!-- 放置tab点击标签 -->
            <div
                class="crad"
                :class="{ highLight: whichIndex == index }"
                v-for="(item, index) in cardArr"
                :key="index"
                @click="
                    whichIndex = index;
                    componentId = item.componentId;
                "
            >
                {{ item.componentName }}
            </div>
        </div>
        <div class="bottom">
            <!-- 放置动态组件... -->
            <!-- keep-alive缓存组件.可以用来包裹router-view  或者是component is，这样的话，组件就不会被销毁，DOM就不会被重新渲染，
      浏览器也就不会回流和重绘，就可以优化性能。不使用的话页面加载就会慢一点 -->
            <!--  
                include: 要缓存的哪些组件(被缓存)
                exclude: 不被缓存的组件   :exclude="['one']"
                max: 最多缓存多少个
            -->

            <keep-alive max="3">
                <component :is="componentId"></component>
            </keep-alive>
        </div>
    </div>
</template>

<script>
import one from "./componentis/one";
import two from "./componentis/two";
import three from "./componentis/three";
import four from "./componentis/four";

export default {
    components: { one, two, three, four },
    props: {},
    data() {
        return {
            whichIndex: 0,
            componentId: "one",
            cardArr: [
                {
                    componentName: "动态组件一",
                    componentId: "one"
                },
                {
                    componentName: "动态组件二",
                    componentId: "two"
                },
                {
                    componentName: "动态组件三",
                    componentId: "three"
                },
                {
                    componentName: "动态组件四",
                    componentId: "four"
                }
            ]
        };
    },
    computed: {},
    methods: {},
    created() {},
    mounted() {}
};
</script>
<style scoped>
/* // 又因为需要有高亮状态样式：默认索引0高亮 */

#app {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    padding: 50px;
    .top {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-around;
        .crad {
            width: 20%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background-color: #fff;
            border: 1px solid #e9e9e9;
        }
        .highLight {
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            transform: translate3d(0, -1px, 0);
            color: red;
        }
    }
    .bottom {
        margin-top: 20px;
        width: 100%;
        height: calc(100% - 100px);
        border: 3px solid pink;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
